<template>
  <h2>教师账号</h2>
  <div class="top">
    <el-dropdown trigger="click" class="xiala1">
      <span class="el-dropdown-link">
        请选择教师
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-input v-model="input" placeholder="请输入教师电话" />
    <!-- 下拉框2 -->
    <el-dropdown trigger="click" class="xiala2">
      <span class="el-dropdown-link">
        全职+课时责任制（方式一）
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <!-- 下拉框3 -->
    <el-dropdown trigger="click" class="xiala3">
      <span class="el-dropdown-link">
        请选择日期
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-button type="primary">查询</el-button>
    <el-button type="info">重置</el-button>
  </div>
  <div class="cz">
    <el-button type="primary">导出</el-button>
    <el-button type="primary">新增</el-button>
  </div>
  <div class="content">
    <!-- 隐藏的编辑box
     -->
    <div class="editbox" v-if="show">
      姓名：<input type="text" v-model="name" /> 手机：<input
        type="text"
        v-model="phone"
      />
      状态：<input type="checkbox" v-model="zt" />

      <div class="editbtn">
        <el-button type="primary" @click="sure">确定</el-button>
        <el-button type="primary" @click="guanbi">关闭</el-button>
      </div>
    </div>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
      style="width: 100%"
      class="head"
    >
      <el-table-column label="">
        <template v-slot="scope">
          <input type="checkbox" v-model="scope.row.flag" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="教师姓名" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="methods" label="计划方式" />
      <el-table-column prop="updataTime" label="更新时间" />
      <el-table-column prop="" label="教师状态">
        <template v-slot="scope">
          <el-switch v-model="scope.row.zt"></el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="joinTime" label="加入时间" />
      <el-table-column label="操作">
        <template v-slot="scope">
          <button @click="edit(scope.row.num)">编辑</button>
          <button @click="remove(scope.row.num)">离职</button>
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">
      <div class="left">
        <p><input type="checkbox" @click="choseall" />全选</p>
        <button>发短信</button>
        <button>发邮件</button>
        <button>导出</button>
      </div>
      <div class="demo-pagination-block">
        <div class="demonstration"></div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pagesize"
          layout="prev, pager, next"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { ArrowDown } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import teacher from "../../../mock/jszh.js";
import jsxq from "../../../mock/jsxq.js";
export default {
  setup() {
    let tableData = ref([]);
    const input = ref("");

    onMounted(async () => {
      const res = await teacher.getDate();
      tableData.value = res.data.data;
      console.log(tableData.value);
      const res2 = await jsxq.getDate();
      console.log(res2);
    });
    // 分页
    const total = ref(1000); //默认数据总数
    const pagesize = ref(6); //每页的数据条数
    const currentPage = ref(1); //默认开始页面
    const handleSizeChange = (size) => {
      pagesize.value = size;
    };
    const handleCurrentChange = (page) => {
      currentPage.value = page;
    };
    // 编辑
    const show = ref(false);
    const name = ref();
    const phone = ref();
    const zt = ref(false);
    const id = ref("");
    const edit = async (num) => {
      const res = await teacher.edit(num);
      console.log(res);
      show.value = true;
      id.value = num;
    };
    // 关闭
    const guanbi = () => {
      show.value = false;
    };
    // 确定
    const sure = () => {
      tableData.value.forEach((element, index) => {
        if (element.num == id.value) {
          tableData.value[index].zt = zt;
          tableData.value[index].name = name;
          tableData.value[index].phone = phone;
        }
      });

      show.value = false;
    };
    // 离职
    const remove = async (num) => {
      console.log(num);
      const res = await teacher.delete(num);
      console.log(res);
      tableData.value = res.data;
    };
    // 全选
    const check = ref(false);
    let nums = 1;
    const choseall = () => {
      nums++;
      if (nums % 2 == 0) {
        tableData.value.forEach((element) => {
          element.flag = true;
        });
      } else {
        tableData.value.forEach((element) => {
          element.flag = false;
        });
      }
    };
    return {
      input,
      tableData,
      total,
      pagesize,
      currentPage,
      handleSizeChange,
      handleCurrentChange,
      remove,
      edit,
      show,
      name,
      phone,
      zt,
      guanbi,
      sure,
      choseall,
      check,
    };
  },
  components: {
    "arrow-down": ArrowDown,
  },
  methods: {},
};
</script>

<style lang="less" scoped>
// 下拉菜单
/deep/.el-dropdown--default {
  margin: 0 auto;
}
.xiala1 {
  width: 200px;
  height: 40px;
  border: 1px solid #bfbfbf;
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  color: #999999;
  .el-dropdown-link {
    display: block;
    width: 160px;
  }
  .el-icon {
    margin-left: 30px;
  }
}
.xiala2 {
  width: 260px;
  height: 40px;
  border: 1px solid #bfbfbf;
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  color: #999999;
  margin-left: 15px;
  .el-dropdown-link {
    display: block;
    width: 270px;
  }
  .el-icon {
    margin-left: 30px;
  }
}
.xiala3 {
  width: 240px;
  height: 40px;
  border: 1px solid #bfbfbf;
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
  color: #999999;
  margin-left: 15px;
  .el-dropdown-link {
    display: block;
    width: 240px;
  }
  .el-icon {
    margin-left: 30px;
  }
}
/deep/.el-popper {
  left: 270px;
}
/deep/.el-dropdown-menu__item {
  width: 120px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

// 输入框
/deep/.el-input,
/deep/.el-input--default {
  width: 240px;
}
/deep/.el-input__inner {
  width: 240px;
  height: 40px;
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  margin-left: 10px;
  color: #999999;
}
.top {
  display: flex;
  margin: 10px auto;
  justify-content: space-between;
}

// 按钮
.el-button {
  margin-left: 30px;
}

// btn2
.cz {
  display: flex;
  justify-content: flex-end;

  margin-top: 10px;
  .el-button {
    width: 160px;
  }
}
//
.content {
  position: relative;
}

// 内容头部
/deep/.head {
  thead {
    .cell {
      background: #acc5ff;
      height: 80px;
      line-height: 80px;
      text-align: center;
    }
  }
}

/deep/.cell {
  text-align: center;
  img {
    cursor: pointer;
  }
  button {
    width: 40px;
    height: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #598cff;
    line-height: 18px;
    border: none;
    background-color: transparent;
    margin-left: 8px;
  }
}
//编辑删除
.editbox {
  width: 200px;
  height: 140px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: lightblue;
  z-index: 999;
  display: flex;
  flex-direction: column;
  .editbtn {
    display: flex;
  }
}
// 底部布局
.bottom {
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    width: 200px;
    justify-content: space-between;
  }
  .demo-pagination-block {
    display: flex;
    justify-content: flex-end;
  }
}
// 输入框颜色
/deep/.el-input__inner {
  background: #f7f7f7;
}
</style>
